<template>
	<view class="container" v-if="data && data.id">
		<!-- // status状态 0已取消 1待支付 2待备餐 3备餐中 4已送达 5已完成 -->
		<view class="order-s u-flex u-col-center u-row-between" v-if="data.status == 1 && data.refundtime == 0">
			<view class="l">
				<view class="t">
					请尽快支付
				</view>
				<view class="p">
					若超时未付款，订单将自动取消
				</view>
			</view>
			<view class="r">
				<text>{{getTime(data.createtime,order_cancel)}}</text>
			</view>
		</view>
		<view class="order-s u-flex u-col-center u-row-between" v-if="data.status == 2 && data.refundtime == 0">
			<view class="l">
				<view class="t">
					待备餐
				</view>
				<view class="p">
					您的订单付款成功，请您稍作等待
				</view>
			</view>
			<view class="r2">
				<image src="@/static/image/bc.png" mode="aspectFill"></image>
			</view>
		</view>
		<view class="order-s u-flex u-col-center u-row-between" v-if="data.status == 3 && data.refundtime == 0">
			<view class="l">
				<view class="t">
					备餐中
				</view>
				<view class="p">
					商家已接单，您的订单正在准备中~
				</view>
			</view>
			<view class="r2">
				<image src="@/static/image/bcz.png" mode="aspectFill"></image>
			</view>
		</view>
		<view class="order-s u-flex u-col-center u-row-between" v-if="data.status == 4 && data.refundtime == 0">
			<view class="l">
				<view class="t">
					待取餐
				</view>
				<view class="p">
					商家已接单，您的订单正在准备中~
				</view>
			</view>
			<view class="r2">
				<image src="@/static/image/dqc.png" mode="aspectFill"></image>
			</view>
		</view>
		<view class="order-s u-flex u-col-center u-row-between" v-if="data.status == 5 && data.refundtime == 0">
			<view class="l">
				<view class="t">
					已完成
				</view>
				<view class="p">
					您的订单已完成，欢迎您的光临~
				</view>
			</view>
			<view class="r2">
				<image src="@/static/image/over.png" mode="aspectFill"></image>
			</view>
		</view>
		<view class="order-s u-flex u-col-center u-row-between"
			v-if="data.refundtime && (data.refund_status==1||data.refund_status==2)"
			@click="$pageTo(`/pages/index/refundData?id=${id}&price=${data.price}&refund_status=${data.refund_status}`)">
			<view class="l">
				<view class="t">
					退款中
				</view>
				<view class="p">
					您的退款申请已提交，退款金额将在1-2个工作日原路退回
				</view>
			</view>
		</view>

		<view class="order-s u-flex u-col-center u-row-between" v-if="data.refundtime && data.refund_status==3"
			@click="$pageTo(`/pages/index/refundData?id=${id}&price=${data.price}&refund_status=${data.refund_status}`)">
			<view class="l">
				<view class="t" >
					退款成功 ￥<text>{{data.price}}</text>
				</view>
				<view class="p">
					您的付款金额已原路退回
				</view>
			</view>

		</view>
		<view class="order-s u-flex u-col-center u-row-between" v-if="data.status == 0 && data.refundtime == 0">
			<view class="l">
				<view class="t">
					已取消
				</view>
				<view class="p">
					期待您的再次光临！
				</view>
			</view>
		</view>
		<view class="ma" v-if="data.status == 4  && data.refundtime == 0">
			<view class="t">
				{{data.send_code}}
			</view>
			<view class="p1">
				取餐码
			</view>
			<view class="p2">
				本店为自取餐厅，请您出示取餐码取餐
			</view>
		</view>
		<view class="order-address" v-if="data.status> 1 && data.status != 5 && data.refundtime == 0">
			<view class="title">
				取餐点 <text class="t1" v-if="sendaddress.distance">距您{{sendaddress.distance.toFixed(2)}}km</text> <text
					class="t2">需您自提</text>
			</view>
			<view class="info u-flex u-col-bottom u-row-between">
				<view class="l">
					<view class="t u-l-1">
						{{sendaddress.name}}
					</view>
					<view class="p u-l-1">
						{{sendaddress.address}}
					</view>
				</view>
				<view class="r u-flex u-col-center u-row-right">
					<image src="@/static/image/order1.png" mode="aspectFill" @click="openLocation"></image>
					<image src="@/static/image/order2.png" mode="aspectFill" @click="call"></image>
				</view>
			</view>

		</view>
		<!-- // status状态 0已取消 1待支付 2待备餐 3备餐中 4已送达 5已完成 -->
		<view class="list">
			<view class="item">
				<view class="i-top u-flex u-col-top u-row-between"
					v-if="(data.status==1 || data.status==2 ||data.status==3) && data.refundtime == 0">
					<view class="l">
						<image src="@/static/image/of5.png" mode="aspectFill"></image>
						<text class="t2">预计</text>
						<text class="t1">{{getDay(data.upday)}} {{getDay3(data.uptime)}} </text>
						<text class="t2">可取餐</text>
					</view>
					<!-- slist: ['已取消', '待支付', '待备餐', '备餐中', '待取餐', '已完成'], -->
					<view class="r">
						<text class="c1" v-if="data.status == 1">待支付</text>
						<text class="c1" v-else>{{slist[data.status]}}</text>
					</view>
				</view>
				<!-- <view class="i-top2 u-flex u-col-center u-row-between" v-else>
					<view class="l">
						订单号：{{data.orderno}}
					</view>
					<view class="r">
						{{slist[data.status]}}
					</view>
				</view> -->
				<view class="i-list">
					<view class="i-middle u-flex u-col-top u-row-between" v-for="(item,index) in orderdish"
						:key="index">
						<view class="img">
							<image :src="http + item.dish.image" mode="aspectFill"></image>
						</view>
						<view class="con">
							<view class="name">
								{{item.dish_name}}
							</view>
							<view class="info" v-if="item.spec_name">
								<view class="i">
									{{item.spec_name}}
								</view>

							</view>
							<view class="info" v-if="item.match_dish.length > 0">
								<view class="i">
									x1 {{item.dish.contain_title}}*{{item.dish.contain_number}}份
								</view>
								<view class="i" v-for="(item2,index2) in item.match_dish" :key="index2">
									x{{item2.number}} {{item2.dish_name}} <text
										v-if="item2.spec_name">({{item2.spec_name}})</text>
								</view>
							</view>
						</view>
						<view class="r">
							<view class="price" >
								￥<text>{{(item.price/item.number).toFixed(2)}}</text>

							</view>
							<view class="num">
								x{{item.number}}
							</view>
						</view>
					</view>
				</view>
				<view class="i-footer" >
					合计￥<text style="font-size: 36rpx;">{{data.price}}</text>
				</view>
			</view>
		</view>
		<view class="list2" v-if="data.refundtime != 0">
			<view class="title">
				退款信息
			</view>
			<view class="item u-flex u-col-center u-row-between">
				<view class="l">
					退款编号
				</view>
				<view class="r u-l-1">
					{{data.refundno}}
				</view>
			</view>

			<view class="item u-flex u-col-center u-row-between">
				<view class="l">
					退款原因
				</view>
				<view class="r u-l-1">
					{{data.refund_reason}}
				</view>
			</view>

			<view class="item u-flex u-col-center u-row-between">
				<view class="l">
					退款金额
				</view>
				<view class="r u-l-1" >
					¥ <text style="font-size: 36rpx;">{{data.price}}</text>
				</view>
			</view>
			<view class="item u-flex u-col-center u-row-between">
				<view class="l">
					退款说明
				</view>
				<view class="r u-l-1">
					{{data.refund_remark}}

				</view>
			</view>
			<view class="item u-flex u-col-center u-row-between" v-if="refund_image.length>0">
				<view class="l">

				</view>
				<view class="r2">
					<image :src="http+item" mode="aspectFill" v-for="(item,index) in refund_image" :key="index"
						@click="pimg(index)"></image>

				</view>
			</view>

			<view class="item u-flex u-col-center u-row-between">
				<view class="l">
					申请时间
				</view>
				<view class="r u-l-1">
					{{$u.timeFormat(data.refundtime, 'yyyy-mm-dd hh:MM:ss')}}
				</view>
			</view>
			<view class="item u-flex u-col-center u-row-between" v-if="data.refund_status==3">
				<view class="l">
					到账时间
				</view>
				<view class="r u-l-1">
					{{$u.timeFormat(data.refundedtime, 'yyyy-mm-dd hh:MM:ss')}}
				</view>
			</view>
		</view>


		<view class="list2">
			<view class="title">
				订单信息
			</view>
			<view class="item u-flex u-col-center u-row-between">
				<view class="l">
					下单门店
				</view>
				<view class="r u-l-1">
					{{data.shop.name}}
				</view>
			</view>
			<view class="item u-flex u-col-center u-row-between">
				<view class="l">
					商品总价
				</view>
				<view class="r u-l-1" >
					￥<text style="font-size: 36rpx;">{{data.price}}</text>
				</view>
			</view>
			<view class="item u-flex u-col-center u-row-between" v-if="data.status > 1">
				<view class="l">
					实付款
				</view>
				<view class="r u-l-1" >
					￥<text style="font-size: 36rpx;">{{data.price}}</text>
				</view>
			</view>
			<view class="hr">

			</view>
			<view class="item u-flex u-col-center u-row-between">
				<view class="l">
					下单时间
				</view>
				<view class="r u-l-1">
					{{$u.timeFormat(data.createtime, 'yyyy-mm-dd hh:MM:ss')}}
				</view>
			</view>
			<view class="item u-flex u-col-center u-row-between"
				v-if="data.status==1 || data.status==2 ||data.status==3">
				<view class="l">
					预约取餐时间
				</view>
				<view class="r u-l-1">
					{{getDay(data.upday)}} {{getDay3(data.uptime)}}
				</view>
			</view>
			<view class="item u-flex u-col-center u-row-between">
				<view class="l">
					订单编号
				</view>
				<view class="r u-l-1">
					{{data.orderno}} <text class="p2" @click="copy(data.orderno)">复制</text>
				</view>
			</view>
			<view class="item u-flex u-col-center u-row-between" v-if="data.status > 1">
				<view class="l">
					支付方式
				</view>
				<view class="r u-l-1">
					微信支付
				</view>
			</view>
			<view class="item u-flex u-col-center u-row-between" v-if="data.status > 1">
				<view class="l">
					支付时间
				</view>
				<view class="r u-l-1">
					{{$u.timeFormat(data.paytime, 'yyyy-mm-dd hh:MM:ss')}}
				</view>
			</view>
			<view class="hr" v-if="data.status ==5">

			</view>
			<view class="item u-flex u-col-center u-row-between" v-if="data.status ==5">
				<view class="l">
					取餐时间
				</view>
				<view class="r u-l-1">
					{{$u.timeFormat(data.completetime, 'yyyy-mm-dd hh:MM:ss')}}
				</view>
			</view>
			<view class="item u-flex u-col-center u-row-between" v-if="data.status ==5">
				<view class="l">
					取餐方式
				</view>
				<view class="r u-l-1">
					{{data.sendtype==1?'自提点自提':'到店自提'}}
				</view>
			</view>
			<view class="item u-flex u-col-center u-row-between" v-if="data.status ==5">
				<view class="l">
					取餐点
				</view>
				<view class="r u-l-1">
					{{data.sendaddress.address}}
				</view>
			</view>
		</view>


		<view class="footer u-flex u-col-center u-row-between" v-if="data.status == 1">
			<view class="l" @click.stop="changeOrder(id,'cancel')">
				取消订单
			</view>
			<view class="r" @click.stop="changeOrder(id,'pay')">
				立即支付￥<text>{{data.price}}</text>
			</view>
		</view>
		<view class="footer u-flex u-col-center u-row-between" v-if="data.status == 4 && data.refundtime == 0">
			<view class="l">

			</view>
			<view class="r" @click.stop="changeOrder(id,'confirm')">
				确认取餐
			</view>
		</view>

		<view class="footer u-flex u-col-center u-row-right" v-if="data.status == 2  && data.refundtime == 0">
			<view class="r2" @click="$pageTo(`/pages/index/applyRefund?id=${id}`)">
				申请退款
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				order_cancel: 0,
				id: '',
				data: {
					id: ""
				},
				uid: '',
				longitude: "",
				latitude: "",
				sendaddress: {},
				orderdish: [],
				http: this.$imgUrl,
				slist: ['已取消', '待支付', '待备餐', '备餐中', '待取餐', '已完成'],
				shopData: {},
				timer: null,
				refund_image: []
			}
		},
		onLoad(o) {
			this.uid = uni.getStorageSync('uid')
			this.longitude = uni.getStorageSync("lng")
			this.latitude = uni.getStorageSync("lat")
			this.id = o.id
			this.getConfig()
		},
		onShow() {
			this.getData()
		},
		computed: {
			getDay3() {
				return (data) => {
					if (data == 1) {
						return '11:00前'
					}
					if (data == 2) {
						return '14:00前'
					}
					if (data == 3) {
						return '18:00前'
					}
					if (data == 4) {
						return '20:00前'
					}
				}
			},
			getTime() {
				return (data, order_cancel) => {

					let now = new Date().getTime();
					let thirtyMinutesLater = data * 1000 + (order_cancel * 60 * 1000);
					let distance = thirtyMinutesLater - now;
					console.log(distance, thirtyMinutesLater, now)

					// 如果倒计时结束
					if (distance < 0) {
						return '超时';
					}
					// 计算天、小时、分钟和秒
					let days = Math.floor(distance / (1000 * 60 * 60 * 24));
					let hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
					let minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)).toString().padStart(2, '0');
					let seconds = Math.floor((distance % (1000 * 60)) / 1000).toString().padStart(2, '0');

					// 输出结果
					console.log(`倒计时：${days}天 ${hours}小时 ${minutes}分钟 ${seconds}秒`);
					return `${minutes}:${seconds}`
				}
			},
		
			getDay() {
				return (data) => {
					// 获取当前日期
					let today = new Date();

					// 获取明天的日期
					let tomorrow = new Date(today);
					tomorrow.setDate(tomorrow.getDate() + 1);

					// 获取后天的日期
					let dayAfterTomorrow = new Date(today);
					dayAfterTomorrow.setDate(dayAfterTomorrow.getDate() + 2);

					// 格式化日期函数（YYYY-MM-DD）
					function formatDate(date) {
						let year = date.getFullYear();
						let month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始
						let day = String(date.getDate()).padStart(2, '0');
						return `${year}-${month}-${day}`;
					}
					if (data == formatDate(today)) {
						return '今天'
					} else if(data == formatDate(tomorrow)) {
						return '明天'
					} else if (data == formatDate(dayAfterTomorrow)) {
						return '后天'
					} else {
						return data.substring(5)
					}
				}
			}
		},
		methods: {
			getConfig() {
				this.$http.post('/app/communals/config', {
				}).then(res => {
					console.log(res)
					if (res.code == 0) {
						this.order_cancel = res.data.order_cancel
					} else {
						uni.showToast({
							title: res.msg,
							icon: "none"
						});
					}
				}).catch(err => {
					console.log('表单错误信息：', err);
				})
			},
			pimg(index) {
				uni.previewImage({
					urls: this.refund_image.map(item => this.http + item),
					current: index
				});
			},
			call() {
				uni.makePhoneCall({
					phoneNumber: this.data.sendaddress.phone,
					fail: (err) => {
						uni.showToast({
							title: '获取电话失败',
							icon: "none"
						});
					}
				})
			},
			openLocation() {
				uni.openLocation({
					latitude: Number(this.sendaddress.latitude),
					longitude: Number(this.sendaddress.longitude),
					success: function() {
						console.log('success');
					},
					fail: (err) => {
						console.log('fail', err);
						uni.showToast({
							title: '查看位置失败',
							icon: "none"
						});
					}
				});
			},
			changeOrder(id, type) {
				let map = {
					pay: {
						content: '确认要支付此订单吗?',
						url: "/app/orders/payOrder",
						title: "支付成功",
						status: 2
					},
					cancel: {
						content: '确认要取消此订单吗?',
						url: "/app/orders/cancelOrder",
						title: "取消成功",
						status: 0
					},
					confirm: {
						content: '确认要取餐吗?',
						url: "/app/orders/confirmOrder",
						title: "取餐成功",
						status: 5
					}
				}
				let {
					content,
					url,
					title,
					status
				} = map[type]

				// "status": 1, //状态 0已取消 1待支付 2待备餐 3备餐中 4已送达 5已完成 
				uni.showModal({
					title: '温馨提示',
					content: content,
					success: (res) => {
						if (res.confirm) {
							console.log('用户点击确定');
							this.$http.post(url, {
								mid: this.uid,
								order_list_id: id,
							}).then(res => {
								console.log(res)
								if (res.code == 0) {

									if (type == 'pay') {
										let {
											timeStamp,
											nonceStr,
											paySign
										} = res.data
										let packagex = res.data.package
										uni.requestPayment({
											provider: 'wxpay',
											timeStamp: timeStamp,
											nonceStr: nonceStr,
											package: packagex,
											signType: 'MD5',
											paySign: paySign,
											success: (res) => {
												uni.showToast({
													title: title,
													icon: "none"
												});
												this.getData()
											},
											fail: function(err) {
												console.log('fail:' + JSON.stringify(err));
											}
										});
									} else {
										uni.showToast({
											title: title,
											icon: "none"
										});
										this.getData()
									}

								} else {
									uni.showToast({
										title: res.msg,
										icon: "none"
									});
								}
							}).catch(err => {
								console.log('表单错误信息：', err);
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			copy(data) {
				uni.setClipboardData({
					data: data,
					success: () => {
						console.log('success');
						uni.showToast({
							title: '复制成功',
							icon: "none"
						});
					}
				});
			},
			getData() {
				// status状态 0已取消 1待支付 2待备餐 3备餐中 4已送达 5已完成

				this.$http.post('/app/orders/orderDetail', {
					mid: this.uid,
					order_list_id: this.id,
					longitude: this.longitude,
					latitude: this.latitude

				}).then(res => {
					console.log(res)
					if (res.code == 0) {
						this.data = res.data
						this.orderdish = res.data.orderdish
						this.sendaddress = res.data.sendaddress
						this.shopData = res.data.shop
						if (res.data.refund_image) {
							this.refund_image = res.data.refund_image.split(',')
						}
					} else {
						uni.showToast({
							title: res.msg,
							icon: "none"
						});
					}
				}).catch(err => {
					console.log('表单错误信息：', err);
				})
			},
		}
	}
</script>

<style lang="less" scoped>
	@color: #E51B00;

	.hr {
		width: 100%;
		height: 2rpx;
		background-color: #eee;
		margin-top: 10rpx auto;
	}

	.container {
		padding: 20rpx 20rpx 160rpx;

		.ma {
			padding: 40rpx 20rpx 20rpx;
			border-radius: 20rpx;
			margin-bottom: 20rpx;
			background-color: #fff;
			text-align: center;

			.t {

				height: 100rpx;
				line-height: 100rpx;
				font-family: "DIN";
				font-weight: bold;
				font-size: 80rpx;
				color: #000000;
				text-align: center;


			}

			.p1 {
				height: 50rpx;
				line-height: 50rpx;
				font-size: 28rpx;
				color: #000000;
				text-align: center;

			}

			.p2 {
				margin-top: 10rpx;
				height: 40rpx;
				line-height: 40rpx;
				font-size: 24rpx;
				color: #8E8E8E;
				text-align: center;

			}
		}

		.footer {
			padding: 20rpx;
			background-color: #fff;
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			z-index: 999;

			.l {
				line-height: 40rpx;
				height: 40rpx;

				font-size: 28rpx;
				color: #8E8E8E;
				text-align: left;

			}

			.r {
				width: 420rpx;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				background: #E51B00;
				border-radius: 40rpx;
				color: #fff;
				font-size: 28rpx;

				text {
					font-size: 32rpx;
					font-weight: 600;
				}
			}

			.r2 {
				width: 200rpx;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				background: #FFFFFF;
				border-radius: 40rpx;
				border: 2rpx solid #D1D1D6;
				color: #979797;
				font-size: 28rpx;
			}
		}

		.list2 {
			padding: 20rpx;
			border-radius: 20rpx;
			margin-bottom: 20rpx;
			background-color: #fff;

			.title {
				height: 50rpx;
				line-height: 50rpx;
				font-weight: 600;
				font-size: 30rpx;
				color: #000;
				text-align: left;

			}

			.item {
				padding: 25rpx 0;

				.l {
					height: 40rpx;
					line-height: 40rpx;

					font-size: 28rpx;
					color: #979797;
					text-align: left;
					width: 200rpx;

				}

				.r {
					flex: 1;
					width: 1rpx;
					margin-left: 20rpx;
					font-size: 28rpx;
					color: #000000;
					text-align: right;

					.p1 {
						font-weight: 600;
						margin-left: 5rpx;
					}

					.p2 {
						color: @color;
						margin-left: 10rpx;
					}

				}

				.r2 {
					flex: 1;
					width: 1rpx;
					margin-left: 20rpx;
					display: flex;
					align-items: center;
					justify-content: flex-end;
					flex-wrap: wrap;

					image {
						width: 80rpx;
						height: 80rpx;
						margin: 0 0 10rpx 10rpx;
						border-radius: 8rpx;
						overflow: hidden;
					}
				}
			}
		}

		.order-address {
			padding: 20rpx;
			border-radius: 20rpx;
			margin-bottom: 20rpx;
			background-color: #fff;

			.title {

				height: 50rpx;
				line-height: 50rpx;

				font-size: 30rpx;
				color: #000000;
				text-align: left;
				display: flex;
				align-items: center;

				.t1 {
					margin-left: 20rpx;
					padding: 0 10rpx;
					height: 32rpx;
					line-height: 28rpx;
					background: #FFFFFF;
					border-radius: 8rpx;
					border: 2rpx solid @color;
					color: @color;
					font-size: 20rpx;
					box-sizing: border-box;
				}

				.t2 {
					font-size: 20rpx;
					height: 32rpx;
					line-height: 28rpx;
					background: #FFEAE8;
					border-radius: 14rpx 14rpx 14rpx 2rpx;
					border: 2rpx solid @color;
					padding: 0 10rpx;
					margin-left: 20rpx;
					color: @color;
					box-sizing: border-box;
				}
			}

			.info {
				margin-top: 20rpx;

				.l {
					flex: 1;
					width: 1rpx;

					.t {

						height: 50rpx;
						line-height: 50rpx;

						font-size: 28rpx;
						color: #000000;
						text-align: left;

					}

					.p {
						margin-top: 10rpx;
						line-height: 30rpx;
						height: 30rpx;

						font-size: 22rpx;
						color: #B1B1B1;
						text-align: left;

					}
				}

				.r {
					image {
						width: 80rpx;
						height: 80rpx;
						margin-left: 20rpx;
					}
				}
			}

		}

		.order-s {
			padding: 20rpx;
			border-radius: 20rpx;
			margin-bottom: 20rpx;
			background-color: #fff;

			.l {
				flex: 1;
				width: 1rpx;

				.t {

					height: 60rpx;
					line-height: 60rpx;

					font-weight: bold;
					font-size: 40rpx;
					color: #000000;
					text-align: left;

					text {}

				}

				.p {

					height: 40rpx;
					line-height: 40rpx;

					font-size: 24rpx;
					color: #8E8E8E;
					text-align: left;

				}
			}

			.r2 {
				width: 140rpx;
				height: 140rpx;
				margin-right: 40rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.r {

				width: 130rpx;
				height: 130rpx;
				background: #FFFFFF;
				border-radius: 0;
				border: 10rpx solid #E51B00;
				line-height: 100rpx;
				text-align: center;
				font-weight: bold;
				font-size: 28rpx;
				color: #E51B00;
				text-align: center;
				border: 15rpx solid #E51B00;
				border-radius: 50%;
				border-top-color: #7B7B7B;
				transform: rotate(45deg);
				box-sizing: border-box;

				text {
					transform: rotate(-45deg);
					display: block;
				}

			}
		}

		.list {


			.item {
				padding: 20rpx;
				border-radius: 20rpx;
				margin-bottom: 20rpx;
				background-color: #fff;

				.i-footer {

					text-align: right;
					height: 80rpx;
					line-height: 80rpx;
					font-size: 24rpx;
					color: #000000;

					text {
						font-size: 32rpx;
						font-weight: 600;
					}
				}

				.i-top2 {
					height: 60rpx;
					line-height: 60rpx;
					font-size: 32rpx;
					color: #979797;

					.l {}

					.r {}
				}

				.i-top {

					.l {
						display: flex;
						align-items: center;

						.t1 {
							font-size: 32rpx;
							color: @color;
						}

						.t2 {
							font-size: 32rpx;
							color: #000;
							margin-left: 10rpx;
						}

						image {
							width: 32rpx;
							height: 32rpx;
							margin-right: 10rpx;
						}
					}

					.r {


						font-size: 28rpx;
						text-align: right;

						.c1 {
							color: #E51B00;
						}

						.c2 {
							color: #666;
						}
					}

				}

				.i-middle {
					border-bottom: 2rpx solid #eee;
					padding: 30rpx 0;

					.r {
						.price {
							height: 40rpx;
							color: #000000;
							font-size: 20rpx;


							text {
								font-size: 28rpx;
								font-weight: bold;
							}
						}

						.num {

							height: 40rpx;
							line-height: 40rpx;
							font-size: 28rpx;
							color: #7B7B7B;
							text-align: right;
						}
					}

					.img {
						width: 100rpx;
						height: 100rpx;
						border-radius: 12rpx;
						overflow: hidden;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.con {
						flex: 1;
						width: 1rpx;
						margin-left: 20rpx;
						margin-right: 20rpx;

						.name {

							height: 30rpx;
							line-height: 30rpx;
							font-size: 28rpx;
							color: #000000;
							text-align: left;

						}

						.info {
							margin-top: 15rpx;

							.i {
								font-size: 24rpx;
								color: #B5B5BB;
								line-height: 40rpx;

								text {
									color: #E6A23C;
									margin-left: 6rpx;
									font-size: 20rpx;
								}
							}

						}

					}
				}

			}
		}
	}
</style>